<template>
  <fl-swiper ref="swiper" :config="config" class="carousel">
    <template>
      <slot />
    </template>
    <template #navigation-prev>
      <button class="carousel-max-prev prev" @click="swiperPrev">
        <i class="icon-chevron-left"></i>
      </button>
    </template>
    <template #navigation-next>
      <button class="carousel-max-next next" @click="swiperNext">
        <i class="icon-chevron-right"></i>
      </button>
    </template>
  </fl-swiper>
</template>

<script>
import FlSwiper from './FlSwiper.vue'
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    FlSwiper,
  },
  methods: {
    swiperPrev() {
      this.$refs.swiper.slidePrev()
    },
    swiperNext() {
      this.$refs.swiper.slideNext()
    },
    /**重载实例 */
    heavyLoad() {
      this.$refs.swiper.heavyLoad()
    },
    /**上一页 */
    slidePrev() {
      this.$refs.swiper.slidePrev()
    },
    /**下一页 */
    slideNext() {
      this.$refs.swiper.slideNext()
    },
  },
}
</script>

<style lang="scss" scoped>
.carousel {
  position: relative;
  overflow: hidden;
  button {
    text-align: center;
    vertical-align: bottom;
    color: #fff;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.15);
    transition: 0.3s;
    z-index: 3;
    width: 22px;
    height: 35px;
    position: absolute;
    top: calc(50% - 17.5px);
    cursor: pointer;
    &:hover {
      background: rgba(0, 0, 0, 0.4);
    }
  }

  .prev {
    position: absolute;
    left: 0;
    border-radius: 0 17.5px 17.5px 0;
  }

  .next {
    right: 0;
    border-radius: 17.5px 0 0 17.5px;
  }
}
</style>
